<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vuejs发送Ajax请求</title>
    <script src="../js/vuejs-2.5.16.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">
    <button @click="fun1">发送get请求</button>
    <button @click="fun2">发送post请求</button>
    <br/><br/>
    {{message}}
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:""
        },
        methods:{
            fun1:function(){
                //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.get('/demo/getAjax.do',{params:{username:"zhangsan",password:"123"}})
                    .then(function (response) {
                        _this.message = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            fun2:function(){
                //在当前方法中定义一个变量，表明是vue对象
                var _this = this;
                axios.post('/demo/postAjax.do',{username:"tomcat",password:"123"})
                    .then(function (response) {
                        _this.message = response.data.username;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    });
</script>
</html>